<template>
	<view class="mYGroup">
		<image :src="Teammap" mode="" class="GroupImg"></image>
		<view class="column groupList">
			<view class="space-between">
				<text style="font-weight: 500;">共享</text>
				<text style="margin-right: 12rpx;"></text>
			</view>
			<view class="space-between swi" v-for="(item) in gream" :key='item.id' >
				<text>{{item.name}}</text>
					<image :src="item.is_fenxiang=='1'?'../../static/groupBenefits/icon.png':'../../static/groupBenefits/icons.png'" mode="" 
					style="width: 68rpx;height: 34rpx;margin: 8rpx 0px;"
					@click="switchChange(item.team_id,item.is_fenxiang)"></image>
			</view>
		</view>
	</view>
	<!-- 新建团惠包弹框 -->
	<uni-popup ref="PobulicePopup" type="center" :is-mask-click="false">
	 <pobulice :title="'温馨提示'" :text="text" @close="closeBankPad" @submit="submit" :type="'center'"></pobulice>
	</uni-popup>
</template>

<script setup lang="ts">
	import { errorToast, successToast} from '@/utils/prompt';
	import { onLoad } from '@dcloudio/uni-app';
	import pobulice from '@c/pobulic/public.vue';
	import { toPublish } from '@mqtt';
	import { ref} from 'vue';
	import {teamFx} from '@/gql/group';
	import { getDriverID } from '@/stores/driverID';
	import { Teammap} from '@/utils/Static';
	const driver_id = getDriverID();
	const PobulicePopup = ref(null);
	const text="如取消分享别人无法购买 不能获得奖励"
	const baoId=ref('')
	const stateT=ref()
	const props = defineProps({
	  state: { type: String },
	  bordID: { type: String },
	});
	const gream=ref([])
	onLoad((pearm)=>{
		setTimeout(()=>{
			teamList()
		},300)
	})
	function teamList(){
		const payload = {
		  query: teamFx,
		  variables: {
			driver_id,
			bao_id: Number(props.bordID),
		  },
		};
		toPublish(
		  'ql/store/getTeamBaobyFx',
		  payload,
		  (obj: any) => {
		    const { bao_team_fx } = obj.data;
			gream.value=bao_team_fx
		  }
		);
	}
	function switchChange(id,state){
		baoId.value=id
		stateT.value=state
		if(state!='1'){
			// showToast('该车有团已经有一样的团惠包')
			submit()
			return
		}else{
			openBankPad()
			return
		}
		
	}
	function submit(){
		const status=stateT.value=='1'?'0':'1'
		const payload = {
			driver_id,
			bao_id: Number(props.bordID),
			team_id:Number(baoId.value),
			status,
			des:'',
		};
		toPublish(
		  'store/addTeamBao',
		  payload,
		  (obj: any) => {
			  closeBankPad()
		    const { code,msg} = obj;
			if(code===1){
				successToast(msg)
				teamList()
			}else{
				teamList()
				errorToast(msg)
			}
		  }
		);
	}
	function openBankPad() {
	  PobulicePopup.value.open();
	}
	function closeBankPad() {
	  PobulicePopup.value.close();
	}
</script>

<style scoped lang="less">
	.mYGroup{
		width: 96%;
		margin: 15rpx 2%;
		border-radius: 5px;
		position: relative;
		background: #FFFFFF;
		box-shadow: 1px 2px 4px 0px rgba(204,204,204,0.5);
		overflow: hidden;
		.GroupImg{
			width: 246rpx;
			height: 152rpx;
			position: absolute;
			bottom: 0px;
			left: 0px;
		}
		.groupList{
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			view{
				width: 100%;
			}
			view:nth-of-type(1){
				margin-bottom: 15rpx;
			}
		}
	}
</style>
